<template>
  <div class="app-container">
    <u-page title="主题管理">
      <div slot="header">
        <el-button type="primary" icon="el-icon-plus" @click="hdlOpen(newForm)">
          {{ textMap['create'] }}
        </el-button>
      </div>
      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="主题名称" prop="name">
            <el-input v-model="listQuery.name" placeholder="请输入主题名称" clearable style="width: 170px" />
          </el-form-item>
          <el-form-item label="活动类型" prop="type">
            <el-select v-model="listQuery.type" placeholder="请选择类型" class="disabled" clearable>
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <u-status v-model="listQuery.status" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="hdlDelete(row.id, row.name)">删除</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>
    <u-dialog :title="textMap[dialogStatus]" :show.sync="dialogFormVisible" width="980px" @confirm="dialogStatus==='create'? handleCreate():handleUpdate()">
      <el-form ref="dialogForm" :model="dataForm" :rules="rules" label-width="100px">
        <el-form-item label="活动时间" prop="validityDate">
          <u-date-time-picker v-model="dataForm.validityDate" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
        </el-form-item>
        <el-form-item prop="type" label="活动类型">
          <el-radio-group v-model="dataForm.type">
            <el-radio-button :label="1">累计返券</el-radio-button>
            <el-radio-button :label="2">单笔多级满赠</el-radio-button>
            <el-radio-button :label="3">累计多级满赠</el-radio-button>
            <el-radio-button :label="5">单笔返券</el-radio-button>
            <el-radio-button :label="6">满额返券</el-radio-button>
            <!--            <el-radio-button :label="4">返礼活动</el-radio-button>-->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="主题名称" prop="name">
          <el-input v-model="dataForm.name" maxlength="20" placeholder="请输入活动名称" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item prop="pic" label="主题图片">
          <u-upload v-model="dataForm.pic" name="file" tips="主题图片 尺寸比例750*300" />
        </el-form-item>
        <el-form-item prop="poster" label="海报图片">
          <u-upload v-model="dataForm.poster" name="file" tips="海报图片" />
        </el-form-item>
        <el-form-item prop="posterBtn" label="海报按钮">
          <u-upload v-model="dataForm.posterBtn" name="file" tips="海报按钮" />
        </el-form-item>
        <el-form-item prop="tip" label="主题规则">
          <u-tinymce v-model="dataForm.tip" :height="300" />
        </el-form-item>
        <el-form-item v-if="!(dataForm.type==1||dataForm.type==2||dataForm.type==3)" label="会员限制" prop="limitDayVip">
          每日<el-input v-model="dataForm.limitDayVip" placeholder="请输入" style="width: 80px;" />张(可领取券张数限制，不限制填0)
        </el-form-item>
        <el-form-item v-if="!(dataForm.type==1||dataForm.type==2||dataForm.type==3)" label="" prop="limitPeriodVip">
          活动内<el-input v-model="dataForm.limitPeriodVip" placeholder="请输入" style="width: 80px;" />张(可领取券张数限制，不限制填0)
        </el-form-item>
        <el-form-item label="指定用户" prop="ifWhiteList">
          <el-radio-group v-model="dataForm.ifWhiteList">
            <el-radio :label="false">不启动</el-radio>
            <el-radio :label="true">启用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="dataForm.ifWhiteList" label="" prop="whiteList">
          <el-input v-model="dataForm.whiteList" type="textarea" placeholder="OPENID白名单" clearable rows="5" />
          <u-tip-info title="格式: openid + 英文的逗号" />
        </el-form-item>
        <el-form-item v-if="!dataForm.ifWhiteList" label="活动对象" prop="cardTypeList">
          <el-checkbox-group v-model="dataForm.cardTypeList" :min="1">
            <el-checkbox label="104">微会员</el-checkbox>
            <el-checkbox label="101">金卡</el-checkbox>
            <el-checkbox label="102">红宝石卡</el-checkbox>
            <el-checkbox label="103">钻石卡</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
<!--        <el-form-item v-if="!dataForm.ifWhiteList" label="导购黑名单" prop="blackEnable">-->
<!--          <el-radio-group v-model="dataForm.blackEnable">-->
<!--            <el-radio :label="true">启用</el-radio>-->
<!--            <el-radio :label="false">不启用</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
        <el-form-item v-if="!dataForm.ifWhiteList" label="黑名单" prop="blacklist">
          <blacklist v-model="dataForm.blacklist" style="width: 100%" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="dataForm.status">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="location" label="排序">
          <el-input v-model="dataForm.location" placeholder="数字越大，排名越靠前" clearable />
        </el-form-item>
      </el-form>
    </u-dialog>
  </div>
</template>

<script>
import blacklist from '@/components/module/blacklist'
export default {
  components: {
    blacklist
  },
  data() {
    return {
      api: this.$u.api.RebatenewSchedule,
      dataForm: {
        ifWhiteList: false
      },
      rules: {
        validityDate: [
          { required: true, message: '时间必选', trigger: 'blur' }
        ],
        cardTypeList: [
          { required: true, message: '活动对象必选', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '主题名称必填', trigger: 'blur' }
        ],
        pic: [
          { required: true, message: '主题图片未上传', trigger: 'blur' }
        ],
        poster: [
          { required: true, message: '主题海报图片未上传', trigger: 'blur' }
        ],
        posterBtn: [
          { required: true, message: '主题海报按钮图片未上传', trigger: 'blur' }
        ],
        tip: [
          { required: true, message: '主题规则必填', trigger: 'blur' }
        ],
        limitDayVip: [
          { required: true, message: '每日张数限制必填', trigger: 'blur' }
        ],
        limitPeriodVip: [
          { required: true, message: '活动内张数限制必填', trigger: 'blur' }
        ],
        ifWhiteList: [
          { required: true, message: '活动内张数限制必填', trigger: 'blur' }
        ],
        whiteList: [
          { required: true, message: '请填写白名单', trigger: 'blur' }
        ]
      },
      listQuery: {
        page: 1,
        pageSize: 10,
        totalCount: 1,
        status: true
      },
      cardTypeList: [
        {
          value: '104',
          label: '微会员'
        }, {
          value: '101',
          label: '金卡'
        }, {
          value: '102',
          label: '红宝石卡'
        }, {
          value: '103',
          label: '钻石卡'
        }
      ],
      typeList: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '1',
          label: '累计返券'
        }, {
          value: '2',
          label: '单笔多级满赠'
        }, {
          value: '3',
          label: '累计多级满赠'
        }, {
          value: '5',
          label: '单笔返券'
        }, {
          value: '6',
          label: '满额返券'
        }
      ],
      textMap: {
        update: '编辑主题',
        create: '新建主题'
      },
      dialogFormVisible: false,
      dialogStatus: '',
      // 表格
      columns: [
        {
          prop: 'name',
          label: '主题名称'
        },
        {
          prop: 'type',
          label: '活动类型',
          render: (h, params) => {
            if (params.row.type === 1) {
              return h('el-tag', { props: { type: 'success' }}, '累计返券')
            } else if (params.row.type === 2) {
              return h('el-tag', '单笔多级满赠')
            } else if (params.row.type === 3) {
              return h('el-tag', { props: { type: 'danger' }}, '累计多级满赠')
            } else if (params.row.type === 5) {
              return h('el-tag', { props: { type: 'warning' }}, '单笔返券')
            } else if (params.row.type === 6) {
              return h('el-tag', { props: { type: 'success' }}, '满额返券')
            } else {
              return h('el-tag', '返礼活动')
            }
          }
        },
        {
          prop: 'beginDate',
          label: '开始时间'
        },
        {
          prop: 'endDate',
          label: '结束时间'
        },
        {
          prop: 'limitDayVip',
          label: '会员日限',
          formatter: (row) => {
            if (row.limitDayVip === 0) {
              return '-'
            } else {
              return row.limitDayVip
            }
          }
        },
        {
          prop: 'limitPeriodVip',
          label: '会员总限',
          formatter: (row) => {
            if (row.limitPeriodVip === 0) {
              return '-'
            } else {
              return row.limitPeriodVip
            }
          }
        },
        {
          prop: 'pic',
          label: '主题图片',
          image: true
        },
        {
          prop: 'status',
          label: '状态',
          render: (h, params) => {
            if (params.row.status) {
              return h('el-tag', { props: { type: 'success' }}, '已启用')
            } else {
              return h('el-tag', { props: { type: 'danger' }}, '禁用')
            }
          }
        },
        {
          prop: 'location',
          label: '排序'
        },
        {
          prop: 'disabled',
          label: '小程序入口',
          align: 'left',
          switch: true,
          change: (event, row) => {
            this.hdlDisable(row, event, '[' + row.name + ']', '2')
          }
        }
      ],
      listLoading: false,
      list: [],
      listOptions: {
        stripe: true
      },
      newForm: {
        type: 1,
        accType: 1,
        status: true,
        cardTypeList: ['104', '101', '102', '103'],
        blackEnable: true,
        ifWhiteList: false
      }
    }
  },
  created() {
    this.hdlList()
  },
  methods: {
    // 新增事件
    handleCreate() {
      const { validityDate } = this.dataForm
      if (validityDate) {
        this.dataForm.beginDate = validityDate[0]
        this.dataForm.endDate = validityDate[1]
      }
      this.dataForm.cardType = this.dataForm.cardTypeList.toString()
      this.hdlCreate()
    },
    // 打开修改弹窗
    handleEdit(row) {
      console.log(row)
      const { beginDate, endDate, cardType } = row
      row.validityDate = []
      if (beginDate && endDate) {
        row.validityDate = [beginDate, endDate]
      }
      if (cardType) {
        row.cardTypeList = cardType.split(',')
      }
      this.hdlEdit(row)
    },
    // 更新操作
    handleUpdate() {
      const { validityDate } = this.dataForm
      if (validityDate) {
        this.dataForm.beginDate = validityDate[0]
        this.dataForm.endDate = validityDate[1]
      }
      this.dataForm.cardType = this.dataForm.cardTypeList.toString()
      this.hdlUpdate()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  .disabled {
    ::v-deep{
      .el-input{
        width: 140px;
      }
    }
  }
}
</style>

